<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="CheckoutOrder.aspx.cs" Inherits="EarringsRecommendationWeb.CheckoutOrder" %>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Order Result</title>
    
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/bootstrap-theme.css">

    <script src="js/jquery-2.1.1.min.js"></script>
    <script src="js/bootstrap.js"></script>
    <script src="js/bootbox.js"></script>
    <script type="text/javascript">
        $(function () {
            $('#form-nav-bar').load('navbar.html');
            $.getScript("js/Login.js", function () { });
        });
    </script>
    <script src="js/formatmoney.js"></script>
  </head>
  <body>  
    <div class="alert alert-success" role="alert" style="display:none; z-index: 1000; position: absolute; left: 0px; top: 50px;">
      <span></span>
    </div>
    <div class="alert alert-danger" role="alert" style="display:none; z-index: 1000; position: absolute; left: 0px; top: 50px;">
      <span></span>
    </div>   
    <!-- Navigation -->
    <nav id="form-nav-bar" class="navbar navbar-inverse navbar-fixed-top" role="navigation">        
        <!-- /.container -->
    </nav>

    <form runat="server">
    <div class="container">
        <div class="from-group col-md-12">
            <address> 
                <div >
                    <label>ชื่อ-นามสกุล</label>         
                    <p style="display: inline-block; margin-left: 20px;" id="member-name">member_name</p>
                </div>
                <div>
                    <label>อีเมล์</label>           
                    <p style="display: inline-block; margin-left: 20px;" id="member-email">email</p>
                </div>
                <div>
                    <label>ที่อยู่</label>          
                    <p style="display: inline-table; margin-left: 20px;" id="member-address">address</p>
                </div>
                <br />
                <span>ลำดับ รูป ชื่อต่างหู ราคา(บาท) จำนวน รวม</span>
            </address>
        </div>
        <div>
            <button type="button" class="btn btn-success">ยืนยัน</button>
        </div>
        <div class="list-group" id="list-order">
            <a href="#" class="list-group-item" style="width: 100%;">
                <div class="form-inline container">
                    <div class="col-md-2">
                        <img src="img\earrings\01.jpg" class="media-object thumbnail" style="width: 120px;">
                        <button type="button" class="btn btn-warning btn-sm">ลบ</button>
                    </div>
                    <div class="col-md-5">
                        <h4 class="list-group-item-heading">List group item heading</h4>
                        <p class="list-group-item-text">Price</p>
                        <p class="list-group-item-text">text text</p>               
                    </div>
                    <div class="col-md-2">
                        <div class="input-group">
                          <span class="input-group-addon">จำนวน</span>
                          <input type="number" class="form-control" min="1">
                        </div>                        
                    </div>
                    <div class="col-md-2">
                        <p class="form-control-static">ราคารวม</p>
                        <p class="form-control-static pull-right">000</p>
                    </div>
                </div>
            </a>         
        </div>

        <div class="col-md-12">
            <div class="pull-right">
                <p class="form-control-static">รวมทั้งสิ้น <span id="grand-total">000</span></p>
            </div>
        </div>
    </div> 
    <!-- container -->
    </form>
    <script type="text/javascript">
        
        $(document).ready(function () {
            if (typeof EarringsInOrder === 'undefined') return;
           
            buildTable();

            if (typeof Member === 'undefined' || Member[0] === null) return;

            var member = Member[0][0];
            document.getElementById('member-name').innerHTML = member.Name;
            document.getElementById('member-email').innerHTML = member.Email;
            document.getElementById('member-address').innerHTML = member.Address;
        });

        function buildTable() {

            var array = EarringsInOrder[0];
            var element = '';
            for (var i = 0; i < array.length; i++) {

                element += '<a href="#" class="list-group-item" style="width: 100%;">';
                element += '    <div class="form-inline container">';
                element += '        <div class="col-md-2">';
                element += '            <img src="' + array[i].imgPath + '" class="media-object thumbnail" style="width: 120px;">';
                element += '            <button type="button" class="btn btn-warning btn-sm" id="btn-'+array[i].er_code+'">ลบ</button>';
                element += '        </div>';
                element += '        <div class="col-md-5">';
                element += '            <h4 class="list-group-item-heading">List group item heading</h4>';
                element += '            <p class="list-group-item-text" value="'+array[i].er_price+' id="price-'+array[i].er_code+'" ">'+Number(array[i].er_price).formatMoney()+'</p>';
                element += '            <p class="list-group-item-text">'+array[i].er_detail+'</p>';
                element += '        </div>';
                element += '        <div class="col-md-2">';
                element += '            <div class="input-group">';
                element += '              <span class="input-group-addon">จำนวน</span>';
                element += '              <input type="number" class="form-control" min="1" value="'+array[i].er_qty+'" id="qty-'+array[i].er_code+'">';
                element += '            </div>';
                element += '        </div>';
                element += '        <div class="col-md-2">';
                element += '            <p class="form-control-static">ราคารวม</p>';
                element += '            <p class="form-control-static pull-right" id="total-'+array[i].er_code+'">'+Number(array[i].er_qty*array[i].er_price).formatMoney()+'</p>';
                element += '        </div>';
                element += '    </div>';
                element += '</a>';
            }

            var list = document.getElementById('list-order');
            list.innerHTML = '';
            list.innerHTML = element;

            for (var i = 0; i < array.length; i++) {
                var code = array[i].er_code;
                document.getElementById('qty-' + code).addEventListener('change', function () {
                    document.getElementById('total-' + code).innerHTML = Number(this.value * document.getElementById('price-' + code).getAttribute('value')).formatMoney();
                });
            }
        }

        function getTotal() {
            var array = EarringsInOrder[0];
            var code = array[i].er_code;
            var temp = 0;
            for (var i = 0; i < array.length; i++) {
                temp += document.getElementById('price-'+code).getAttribute('value') * document.getElementById('qty-' + code).value;
            }

            $('#grand-total').val(Number(temp).formatMoney());
        }

        $(document).on('click', '.btn-sm', function () {
            var array = EarringsInOrder[0];
            if (array.length <= 0) return;

            var code = $(this).attr('id').split('-')[1];
            removeItem(code, $this);
            //$(this).parent().parent().remove();
        });

        function removeItem(erCode, $button) {
            $.ajax({
                type: "POST",
                dataType: "json",
                crossDomain: true,
                url: "http://localhost:49331/WSRestFul.asmx/",
                data: {er_code: erCode}
            }) //ajax
            .done(function (data) {
                Toast.init({
                    "selector": ".alert-success"
                });
                Toast.show("ลบออกจากรายการ เรียบร้อย !!!");

                $button.parent().parent().remove();
            }) //done
            .fail(function (data) {
                bootbox.dialog({
                    title: 'Fatal Error',
                    message: '<div class="alert alert-danger" role="alert"><strong>Error in connection !!!</strong></div>'
                });//boobox
            }) //fail
        }
       
    </script>
  </body>
</html>